<template>
	<view>
		<view v-if="list.length" class="notice-box" :style="'background-color: '+bgColor+';'">
			<scroll-view class="notice-content">
				<swiper class="swiper" :autoplay="true" :interval="switchTime*1000" :duration="1500" :circular="true" :vertical="true" disable-touch>
					<swiper-item v-for="(t, index) in list" :key="index" class="notice-content-item">
						<view class="swiper-item Media Media--alignCenter Media--justifyCenter">
							<text class="notice-content-item-text" :style="'color: '+color+';'">
								<image style="width: 36rpx;height: 36rpx;border-radius: 10px;vertical-align: middle" :src="t.headimgurl"></image>
                                <text style="margin: 0 28rpx 0 12rpx;font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;font-weight: 400;font-size: 24rpx;color: #222222;">{{ t.nickname }}</text>
								{{t.info}}
							</text>
						</view>
					</swiper-item>
				</swiper>
			</scroll-view>
		</view>
	</view>
</template>
 
<script>
import { getBuyList } from '@/service/index'
	export default {
		props:{
			content_id: {
				type: Number,
				default: 0
			}, 
			color: {
				type: String,
				default: '#de8c17'
			},
			bgColor: {
				type: String,
				default: '#fffbe8'
			},
			switchTime: {
				type: Number,
				default: 2
			},
		},
        data () {
            return {
                list: [],
            }
        },
        mounted () {
            getBuyList({content_id: this.content_id}).then(res => {
                if (res.code == 200) {
                    this.list = res.data
                }
            })
        }
	}
</script>
 
<style>
	.swiper{
		height: 60upx!important;
	}
	.notice-box{
		width: 100%; 
		height: 60rpx; 
		overflow: hidden; 
		display: flex; 
		justify-content: flex-start;
        background-color: #FFF6ED !important;
		position: relative;
	}
	.notice-box::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		width: 100%;
		background: transparent;
		z-index: 1;
	}
	.notice-content{
		/* width: calc(100% - 220upx);  */
		position: relative; 
		font-size: 14px;
	}
	.notice-content-item{
		width: 100%; 
		height: 60rpx; 
		text-align: left; 
		line-height: 60rpx;
	}
	.notice-content-item-text{
		display: block; 
		white-space: nowrap; 
		text-overflow: ellipsis; 
		overflow: hidden;
        text-align: center;
        font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
        font-weight: 400;
        font-size: 24rpx;
        color: #8E512F !important;
	}
	
	@keyframes anotice {
		 0%  {transform: translateY(100%);}
	    30%  {transform: translateY(0);}
	    70%  {transform: translateY(0);}
	   100%  {transform: translateY(-100%);}
	}
</style>